<!-- 饼图的配置 -->
<template>
  <div style="border-bottom: 1px solid #373838">
    <el-collapse accordion>
      <el-collapse-item title="饼图设置">
        <el-form-item label="环形">
          <el-switch v-model="myConfig.radius" class="float_right"></el-switch>
        </el-form-item>
        <el-form-item label="自动排序">
          <el-switch v-model="myConfig.sort" class="float_right"></el-switch>
        </el-form-item>
        <el-form-item label="不展示零">
          <el-switch
            v-model="myConfig.notCount"
            class="float_right"
          ></el-switch>
        </el-form-item>
        <el-form-item :label="$t('圆心大小')" class="form_item_margin">
          <el-slider
            v-model="myConfig.radiusN"
            :show-tooltip="false"
            class="slider136 r_margin_right8"
          />
          <el-input
            v-model.number="myConfig.radiusN"
            class="r_56width"
            oninput="value=value.replace(/[^\d]/g,'')"
          >
            <span slot="suffix" style="line-height: 32px">%</span>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('外圆大小')" class="form_item_margin">
          <el-slider
            v-model="myConfig.radiusW"
            :show-tooltip="false"
            class="slider136 r_margin_right8"
          />
          <el-input
            v-model.number="myConfig.radiusW"
            class="r_56width"
            oninput="value=value.replace(/[^\d]/g,'')"
          >
            <span slot="suffix" style="line-height: 32px">%</span>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('水平位置')" class="form_item_margin">
          <el-slider
            v-model="myConfig.centerH"
            :show-tooltip="false"
            class="slider136 r_margin_right8"
          />
          <el-input
            v-model.number="myConfig.centerH"
            class="r_56width"
            oninput="value=value.replace(/[^\d]/g,'')"
          >
            <span slot="suffix" style="line-height: 32px">%</span>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('垂直位置')" class="form_item_margin">
          <el-slider
            v-model="myConfig.centerV"
            :show-tooltip="false"
            class="slider136 r_margin_right8"
          />
          <el-input
            v-model.number="myConfig.centerV"
            class="r_56width"
            oninput="value=value.replace(/[^\d]/g,'')"
          >
            <span slot="suffix" style="line-height: 32px">%</span>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('南丁格尔')">
          <l-select :options="roseTypeOptions" v-model="myConfig.roseType" />
        </el-form-item>
        <el-form-item :label="$t('圆角大小')">
          <el-input-number
            v-model="myConfig.borderRadius"
            :min="0"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item :label="$t('选中模式')">
          <l-select
            :options="selectedModeOptions"
            v-model="myConfig.selectedMode"
          />
        </el-form-item>
        <el-form-item :label="$t('默认选中')">
          <el-input-number
            v-model="myConfig.selectedModeNum"
            :min="0"
            controls-position="right"
          />
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      roseTypeOptions: [
        { label: "圆心角数据百分比", value: "radius" },
        { label: "圆心角相同", value: "area" },
      ],
      selectedModeOptions: [
        { label: "单选", value: "single" },
        { label: "多选", value: "multiple" },
      ],
    };
  },
  computed: {
    myConfig() {
      return this.config;
    },
  },
};
</script>

<style>
</style>